<style scoped lang="less">
    .main {
        height: 100%;
    }

    .customer {
        position: absolute;
        right: 40px;
        bottom: 20px;

        &-icon {
            width: 80px;
            height: 80px;
            cursor: pointer;

            &-img {
                float: right;
            }

            img {
                width: 100%;
            }
        }

        &-people {
            width: 200px;
            height: 400px;
            background: #f3f3f3;
            display: flex;
            flex-direction: column;
            align-items: center;

            &-img {
                width: 100%;
            }

            &-box {
                margin-top: 10px;
                width: 100px;
            }

            &-text {
                font-size: 16px;
            }
        }
    }
</style>

<template>
    <div class="main">
        <main-theme1>
            <router-view></router-view>
        </main-theme1>
        <div class="customer" v-show="show">
            <div class="customer-icon" @click="customerShow">
                <div class="customer-icon-img">
                    <img src="../../../assets/images/客服.png">
                </div>
            </div>
            <div class="customer-people" v-show="show">
                <div class="customer-people-box">
                    <div>
                        <img class="customer-people-img" src="../../../assets/images/1.jpg">
                    </div>
                    <div>
                        <img class="customer-people-img" src="../../../assets/images/2.jpg">
                    </div>
                    <div>
                        <img class="customer-people-img" src="../../../assets/images/3.jpg">
                    </div>
                </div>
                <div class="customer-people-text">
                    <div>16622515160</div>
                    <div>15602048016</div>
                    <div>15522189980</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
import MainTheme1 from '@/components/layout/theme1'

export default {
  components: { MainTheme1 },
  data () {
    return {
      show: false
    }
  },
  methods: {
    ...mapActions([
      'getUserInfo',
      'getPhpMenusData',
      'getJavaMenusData',
      'setBreadCrumb'
    ]),
    customerShow () {
      this.show = !this.show
    }
  },
  mounted () {
    this.getUserInfo().then(ret => {
      if (ret.errcode === 1001) {
      } else {
        this.$router.push({
          name: 'login'
        })
      }
    })
    this.getJavaMenusData(this.$store.state.app.menuSelectId)
  }
}
</script>
